<template>
  <div class="descriptions">
    <div class="descriptions__header">
      <div class="descriptions__title" v-if="title">{{ title }}</div>
      <slot name="title-extra"></slot>
    </div>
    <div class="descriptions__body"
      :style="{'grid-template-columns': `repeat(${column}, minmax(0, 1fr))`}"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'AppDescriptions',
  props: {
    title: {
      type: String,
    },
    column: {
      type: Number,
      default: 3,
    },
  },
});
</script>

<style scoped>
.descriptions {
  @apply bg-white text-base w-full m-6 rounded;

  .descriptions__header {
    @apply py-4 px-6 relative;
    @apply flex justify-between items-center;
    @apply border-b border-solid border-[#E8EAEC];

    .descriptions__title {
      @apply font-semibold;
    }
  }

  .descriptions__body {
    @apply py-6 px-[5%];
    @apply grid gap-y-7 gap-x-3;
  }
}
</style>